<template>
  <div id="convenient">
    <div class="conten">
      <div class="conten_box">
        <div class="today">
          <div @click="today_view">
            <i class="el-icon-s-claim" style="font-size: 20px;"></i>
            <div>今日概览</div>
          </div>
        </div>

        <div class="illustrate" @click="legend_desc">
          <div>
            <i class="el-icon-picture-outline" style="font-size: 20px;"></i>
            <div>图例说明</div>
          </div>
        </div>
      </div>

    </div>


    <el-dialog title="提示" :visible.sync="dialogVisible" width="800px">
      <div slot="title" >
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="今日预抵" name="arrivals"> </el-tab-pane>
          <el-tab-pane label="今日预离" name="leave"></el-tab-pane>
          <el-tab-pane label="当前在住" name="third"></el-tab-pane>
          <el-tab-pane label="未排房" name="fourth"></el-tab-pane>
        </el-tabs>
        <div style="position: relative;height:400px;">
          <el-table :data="tableData" style="width: 100%" border :max-height="330"
            :header-cell-style="{ background: '#ebeef5' }">
            <el-table-column prop="name" label="姓名" width="80" align="center">
            </el-table-column>
            <el-table-column prop="phone" label="手机号" width="120" align="center">
            </el-table-column>
            <el-table-column prop="channel" label="渠道" width="80" align="center">
            </el-table-column>
            <!-- <el-table-column prop="type" label="入住类型" width="80" align="center">
            </el-table-column> -->
            <el-table-column prop="room_title" label="房型" width="150" align="center">
            </el-table-column>
            <el-table-column prop="room_num" label="房间号" width="80" align="center">
            </el-table-column>
            <el-table-column prop="time" label="入离时间" width="130" align="center">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.start_date }} - {{ scope.row.end_date }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="金额" align="center">
            </el-table-column>
          </el-table>
          <div class="pagination">
            <pagination :data="pageNation_data" @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </pagination>
          </div>
        </div>
      </div>

    </el-dialog>

    <el-drawer title="图例说明" :visible.sync="drawerVisible" size="320px">
      <div class="drawer">
        <!-- 状态颜色 -->
        <div class="illustrate_box">
          <div class="illustrate_title">状态颜色</div>
          <div class="color_state">
            <div class="color_state_items" v-for="item in color_state" :key="item.id">
              <div class="illustrate_items_color" :style="{ backgroundColor: item.color }"></div>
              <p>{{ item.text }}</p>
            </div>
          </div>
        </div>
        <!-- 订单标签 -->
        <div class="illustrate_box">
          <div class="illustrate_title">订单标签</div>
          <div class="color_state">
            <div class="color_state_items" v-for="item in order_tag" :key="item.id">
              <div class="illustrate_items_border">
                <div class="illustrate_items_border_tag" :style="{ backgroundColor: item.color_tag }">{{ item.text_tag }}
                </div>
              </div>
              <p>{{ item.text }}</p>
            </div>
          </div>
        </div>
        <!-- 房间状态 -->
        <div class="illustrate_box">
          <div class="illustrate_title">房间状态</div>
          <div class="color_state">
            <div class="color_state_items" v-for="item in room_state" :key="item.id">
              <div v-if="item.icon">
                <div class="illustrate_items_color" :style="{ backgroundColor: item.color }">
                  <div class="illustrate_items_color_icon">
                    <!-- <i :class="item.icon"></i> -->
                    <div :class="item.icon"></div>
                  </div>
                </div>
                <p>{{ item.text }}</p>
              </div>

              <div v-else>
                <div class="illustrate_items_color" :style="{ backgroundColor: item.color }">
                  <div class="illustrate_items_color_tag" :style="{ backgroundColor: item.color_tag }">{{ item.text_tag }}
                  </div>
                </div>
                <p>{{ item.text }}</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 入住类型 -->
        <div class="illustrate_box">
          <div class="illustrate_title">入住类型</div>
          <div class="color_state">
            <div class="color_state_items" v-for="item in check_type" :key="item.id">
              <div class="illustrate_items_border">
                <div class="illustrate_items_border_tag" :style="{ backgroundColor: item.color_tag }">{{ item.text_tag }}
                </div>
              </div>
              <p>{{ item.text }}</p>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import Pagination from '../../components/PaginationPage/Pagination.vue'

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      dialogVisible: false,
      drawerVisible: false,
      activeName: 'first',
      tableData: [],
      color_state: [
        {
          id: 1,
          text: '待确认',
          color: '#00E577'
        },
        {
          id: 2,
          text: '待付款',
          color: '#FF5574'
        },
        {
          id: 3,
          text: '已预订',
          color: '#FED4B3'
        },
        {
          id: 4,
          text: '已入住',
          color: '#C2EBFF'
        },
        {
          id: 5,
          text: '已退房',
          color: '#D9D9D9'
        },
      ],
      order_tag: [
        {
          id: 1,
          text: '欠款',
          text_tag: '欠',
          color_tag: '#F56C6C'
        },
        {
          id: 2,
          text: '多收',
          text_tag: '￥',
          color_tag: '#F56C6C'
        },
      ],
      room_state: [
        {
          id: 1,
          text: '预抵',
          text_tag: '抵',
          color_tag: '#FE9544',
          color: '#FFAA5C',
        },
        {
          id: 2,
          text: '预离',
          text_tag: '离',
          color_tag: '#8565FF',
          color: '#CD8DFF',
        },
        {
          id: 3,
          text: '维修房',
          icon: 'iconfont icon-banshou',
          color: '#CCCCCC',
        },
        {
          id: 4,
          text: '停用房',
          icon: 'el-icon-remove',
          color: '#CCCCCC',
        },
        {
          id: 5,
          text: '保留房',
          icon: 'iconfont icon-s-claim',
          color: '#CCCCCC',
        },
        {
          id: 6,
          text: '脏房',
          icon: 'iconfont icon-saoba',
          color: '#CCCCCC',
        },
      ],
      check_type: [{
        id: '1',
        text: '钟点房',
        text_tag: '钟',
        color_tag: '#16D2A5'
      }],


      pageNation_data: {
        total: 0,
        currentPage: 1,
        currentSize: 10,
        small: true
      },// 传递分页组件的数据
    }
  },
  created() {
    this.GetOrderList()
  },
  methods: {
    today_view() {
      this.dialogVisible = true
    },
    legend_desc() {
      this.drawerVisible = true
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    // 获取列表数据
    GetOrderList() {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        start_date: '2023-11-24',
        end_date: '2023-11-24',
        //  page: this.pageNation_data.currentPage,
        // page_rows: this.pageNation_data.currentSize,
        overview: null,//all, 预离：leave，预抵：arrivals， 新办： new， 未排房：not_assign, 待处理： not_handel
      }
      console.log(data, '筛选表格数据');
      this.my_request('supplier/hotel-pms-order', data, "GET").then(res => {
        console.log(res, '获取今日概表格数据结果')
        let { code, data } = res.data
        if (200 == code) {
          this.tableData = data.list
          this.pageNation_data.total = data.total
          console.log(this.tableData, '今日概表格数据');
        }
      })
    },

    handleSizeChange(val) {
      // 处理每页数量改变的逻辑
      console.log(`每页 ${val} 条`);
      this.pageNation_data.currentSize = val
      this.GetOrderList()
    },
    handleCurrentChange(val) {
      // 处理当前页码改变的逻辑
      console.log(`当前页: ${val}`);
      this.pageNation_data.currentPage = val
      this.GetOrderList()
    },
  }
}

</script>
<style lang="scss" scoped>
::v-deep .pagination {
  height: 40px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  right: 10px;
  z-index: 1000000000000;

  .el-input.el-input--suffix>.el-input__inner {
    height: 28px;
  }
}

.iconfont {
  font-size: 18px;
}

.iconfont.icon-saoba {
  font-size: 25px;
}

.conten {
  // width: 100%;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // position: absolute;
  // bottom: 15%;
  // z-index: 203;
  // margin-bottom: 5%;
}

.conten_box {
  width: 160px;
  height: 50px;
  background-color: #646568;
  border-radius: 50px;
  color: white;
  display: flex;
  justify-content: space-around;
  font-size: 13px;
  text-align: center;

  .today,
  .illustrate {
    margin-top: 6px;
  }
}


.illustrate_box {
  border-top: 1px solid #ccc;
  padding: 0 30px;

  .illustrate_title {
    line-height: 45px;
  }

  .color_state {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 14px;

    .color_state_items {
      width: 90px;
      height: 86px;
      text-align: center;
    }

  }

  .illustrate_items_color {
    width: 90px;
    height: 50px;
    position: relative;

    .illustrate_items_color_tag {
      width: 16px;
      height: 17px;
      line-height: 17px;
      text-align: center;
      font-size: 12px;
      color: white;
      margin: 5px;
      position: absolute;
      bottom: 0;
      right: 0;
    }

    .illustrate_items_color_icon {
      font-size: 18px;
      color: #787878;
      line-height: 50px;
    }
  }

  .illustrate_items_border {
    width: 90px;
    height: 50px;
    border: 1px solid black;

    .illustrate_items_border_tag {
      width: 16px;
      height: 17px;
      line-height: 17px;
      text-align: center;
      font-size: 12px;
      color: white;
      margin: 5px;
      float: right;
    }
  }
}
</style>